<!-- 跟进状态步骤组件 -->
<template>
  <a-modal
    v-model:visible="dialogVisible"
    @cancel="handleCancel"
    :on-before-ok="handleBeforeOk"
    unmountOnClose
    width="50%"
    :mask-closable="false"
  >
    <template #title> 修改跟进状态 </template>
    <div>
      <a-steps
        small
        type="arrow"
        changeable
        :current="currSteps"
        @change="changeSteps"
      >
        <a-step v-for="item in stateList" :key="item.id">
          {{ item.name }}
        </a-step>
      </a-steps>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect } from 'vue';

  const props = withDefaults(
    defineProps<{
      state: number; // 当前的状态
      visible: boolean; // 是否显示步骤条组件
      stateList: any;
    }>(),
    {
      visible: false,
    }
  );

  const emits = defineEmits(['update:visible', 'changeStepsEmit']);

  // 是否显示对话框
  const dialogVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emits('update:visible', visible);
    },
  });
  // 储存当前步骤
  let currSteps = computed({
    get() {
      return props.state;
    },
    set(state: number) {
      emits('changeStepsEmit', state);
    },
  });
  watchEffect(() => {
    if (dialogVisible.value) console.log(currSteps.value);
  });
  // 修改当前状态
  const changeSteps = (step: number) => {
    currSteps.value = step;
  };

  // 取消
  const handleCancel = () => {
    dialogVisible.value = false;
  };

  // 确认
  const handleBeforeOk = () => {
    emits('changeStepsEmit', currSteps.value);
    dialogVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
